import { FC, useEffect, useState } from "react";
import "./index.scss";
import { Avatar, Button, Input } from "antd";
import { getFrendInfo } from "@renderer/api";
import { CloseOutlined, EditOutlined } from "@ant-design/icons";

type PropType = {
  frendId: string;
  onSend: any;
  onclose: any;
};
// type Frend = {
//   frendId: string;
//   avatar: string;
//   frendName: string;
//   message: string;
//   time: string;
//   status: string;
//   type: string;
//   count: number;
// };
const UserInfo: FC<PropType> = (props): JSX.Element => {
  const { frendId, onSend, onclose } = props;
  const [userInfoState, setUserInfoState] = useState({
    nickname: "土豆哥",
    gender: "男",
    birthday: "1970-01-01",
    phone: "1577778888",
    remark: "今天过冬至"
  });
  const [item, setItem] = useState<any>({});
  useEffect(() => {
    const frend = getFrendInfo(frendId);
    setItem(frend);
  }, []);
  const [editId, setEditId] = useState("");
  const handleEdit = (type: string) => {
    switch (type) {
      case "nickname":
        setEditId("nickname");
        break;
      case "gender":
        setEditId("gender");
        break;
      case "birthday":
        setEditId("birthday");
        break;
      case "phone":
        setEditId("phone");
        break;
      case "remark":
        setEditId("remark");
        break;
      default:
        setEditId("");
        break;
    }
  };
  const handleKeyDown = (e, type: string, value: string) => {
    if (e.which !== 13) {
      return;
    }
    switch (type) {
      case "nickname":
        setUserInfoState({ ...userInfoState, nickname: value });
        break;
      case "gender":
        setUserInfoState({ ...userInfoState, gender: value });
        break;
      case "birthday":
        setUserInfoState({ ...userInfoState, birthday: value });
        break;
      case "phone":
        setUserInfoState({ ...userInfoState, phone: value });
        break;
      case "remark":
        setUserInfoState({ ...userInfoState, remark: value });
        break;
      default:
        break;
    }
    setEditId("");
    console.log("userInfoState", userInfoState);
  };
  return (
    <div className="user-info">
      <div className="user-info-title">
        <div className="user-info-title--left">个人资料</div>
        <div className="user-info-title--close" onClick={() => onclose()}>
          <Button type="text" icon={<CloseOutlined />} className="btn" />
        </div>
      </div>
      <div className="user-info-base">
        <Avatar className="user-info-base--avatar" size={64}>
          {item && item.frendName && item.frendName.charAt(0)}
        </Avatar>
        {/* <Avatar className="user-info-base--avatar" size={64} src={item.avatar} /> */}
        <div className="user-info-base--wrap">
          <div className="user-info-base--title">{item && item.frendName}</div>
          <div className="user-info-base--title">{item && item.frendId}</div>
        </div>
      </div>
      <div className="user-info--item">
        <div className="user-info--label">昵称</div>
        <div className="user-info--value">
          <Input
            className="input"
            disabled={!(editId === "nickname")}
            value={userInfoState.nickname}
            size="small"
            onKeyDown={(e: any) => handleKeyDown(e, "nickname", e.target.value)}
          ></Input>
          <EditOutlined onClick={() => handleEdit("nickname")} />
        </div>
      </div>
      <div className="user-info--item">
        <div className="user-info--label">性别</div>
        <div className="user-info--value">
          <Input
            className="input"
            disabled={!(editId === "gender")}
            value={userInfoState.gender}
            size="small"
            onKeyDown={(e) => handleKeyDown(e, "gender", e.target.value)}
          ></Input>
          <EditOutlined onClick={() => handleEdit("gender")} />
        </div>
      </div>
      <div className="user-info--item">
        <div className="user-info--label">出生日期</div>
        <div className="user-info--value">
          <Input
            className="input"
            disabled={!(editId === "birthday")}
            value={userInfoState.birthday}
            size="small"
            onKeyDown={(e:any) => handleKeyDown(e, "birthday", e.target.value)}
          ></Input>
          <EditOutlined onClick={() => handleEdit("birthday")} />
        </div>
      </div>
      {/* <div className="user-info--item">
        <div className="user-info--label">ID</div>
        <div className="user-info--value">123456</div>
      </div> */}
      <div className="user-info--item">
        <div className="user-info--label">手机号码</div>
        <div className="user-info--value">
          <Input
            className="input"
            disabled={!(editId === "phone")}
            value={userInfoState.phone}
            size="small"
            onKeyDown={(e:any) => handleKeyDown(e, "phone", e.target.value)}
          ></Input>
          <EditOutlined onClick={() => handleEdit("phone")} />
        </div>
      </div>
      <div className="user-info--item">
        <div className="user-info--label">个性签名</div>
        <div className="user-info--value">
          <Input
            className="input"
            disabled={!(editId === "remark")}
            value={userInfoState.remark}
            size="small"
            onKeyDown={(e:any) => handleKeyDown(e, "remark", e.target.value)}
          ></Input>
          <EditOutlined onClick={() => handleEdit("remark")} />
        </div>
      </div>
      <div className="user-info--action">
        <Button
          className="user-info--btn"
          type="primary"
          onClick={() => {
            onSend(frendId);
          }}
        >
          发消息
        </Button>
      </div>
    </div>
  );
};

export default UserInfo;
